import React from 'react'
import './demo.css'
import style from './demo.module.css'

class Demo extends React.Component {

  constructor(props) {
    console.log('props:', props)
    super(props)
    this.state = {
      tabChannel: 0,
      arr1: [
        { goodsName: '电脑', stock: 100 },
        { goodsName: '手机', stock: 100 },
        { goodsName: '平板', stock: 100 }
      ],
      arr2: [
        { goodsName: 'xxx电脑', price: 8000 },
        { goodsName: 'yyy手机', price: 5000 },
        { goodsName: 'zzz平板', price: 3000 }
      ]
    }
  }

  changeTab(num) {
    console.log('this:', this)
    this.setState({
      tabChannel: num
    })
  }

  content1() {
    const arr = []
    this.state.arr1.forEach((v, k) => {
      arr.push(<div key={ k }>名称：{ v.goodsName }， 库存： { v.stock }</div>)
    })
    return arr
  }

  content2() {
    return this.state.arr2.map((v, k) => {
      return <div key={ k }>
        <span>名称：{ v.goodsName }</span>，
        <span>价格： { v.price }</span>，
        <button onClick={ this.handleDelete.bind(this, v) }>删除</button>
        <button onClick={ () => this.handleDelete(v) }>删除2</button>
      </div>
    })
  }

  getContent() {
    if (this.state.tabChannel == 1) {
      return this.content1()
    } else if (this.state.tabChannel == 2) {
      return this.content2()
    } else {
      return <div>暂无内容</div>
    }
  }

  // 删除
  handleDelete(item) {
    console.log('item:', item)
    console.log('this:', this)

    const _arr = this.state.arr2.filter(v => v.goodsName != item.goodsName)
    this.setState({
      arr2: _arr
    })
  }

  getClassNameFn(n) {
    console.log('this:', this)
    return this.state.tabChannel == n ? style['active'] + ' ' + style.tab : style.tab
  }

  render() {
    return (
      // <div style={{border: '1px solid #ccc', color: '#f40'}}>
      <>
        <div className="box-container">全局样式</div>

        <div>
          props: { this.props.name },{ this.props.age }
        </div>
        <div className={ style['box-container'] + ' ' + style['fz-24'] }>
          <div>哪个tab：{ this.state.tabChannel }</div>

          {/*<div className={'active tab'} onClick={ this.changeTab.bind(this, 1) }>库存</div>*/ }
          <div className={ style['tab-container'] }>
            <div className={ this.getClassNameFn(1) }
                 onClick={ this.changeTab.bind(this, 1) }>
              库存
            </div>
            <div className={ this.state.tabChannel == 2 ? style['active'] + ' ' + style.tab : style.tab }
                 onClick={ () => this.changeTab(2) }>
              商品
            </div>
          </div>


          <div>{ this.getContent() }</div>
        </div>
      </>

    )
  }
}

export default Demo
